<template>
	<div class="login">
		<mt-header fixed title="个人用户登陆">
			<a href="javascript:;" @click="goBack" slot="left"><mt-button icon="back">返回</mt-button></a>
			<!-- <mt-button icon="more" slot="right"></mt-button> -->
		</mt-header>
		<img src="../assets/login.jpeg" />
		<div class="cont">
			<mt-field label="手机" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
			<mt-field class="pass" label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
			<mt-button type="primary" class="loginBtn" @click="loginBtn">登陆</mt-button>
			<div class="otherLink">
				<a href="javascript:;" @click="toRegister">新用户注册</a>
				<a href="javascript:;" @click="showForgetPass = !showForgetPass">忘记密码</a>
			</div>
		</div>
		<mt-popup class="forgetPassPopup" v-model="showForgetPass" position="right">
			<mt-header title="找回密码">
				<a href="javascript:;" @click="showForgetPass = !showForgetPass" slot="left"><mt-button icon="back">返回</mt-button></a>
			</mt-header>
			<div class="findPassForm">
				<mt-field label="手机号" placeholder="请输入注册手机号" type="tel" v-model="phone"></mt-field>
				<mt-field class="yzmInput" label="验证码" placeholder="请输入验证码" type="number" v-model="yzm">
					<mt-button type="danger" size="small" class="getYzm" @click="getYzm" :disabled="yzmBtnDis">{{yzmBtnTxt}}</mt-button>
				</mt-field>
				<mt-button type="primary" class="findPassBtn" @click="findPassBtn">找回</mt-button>
			</div>
		</mt-popup>
	</div>
</template>

<script>
import { Toast,Indicator } from 'mint-ui';
export default {
	data() {
		return {
			password: '',
			phone: '',
			showForgetPass: false,
			yzm:"",
			yzmBtnTxt:"获取验证码",
			yzmBtnDis:false,
			realYzm:""
		};
	},
	methods: {
		loginBtn() {
			//验证
			if(this.phone.trim() == "" || this.password.trim() == ""){
				Toast({
					message: "手机或密码为必填项",
					duration: 1000
				})
				return
			}
			//登陆请求
			Indicator.open();	//loading
			let url = this.baseUrl+"t_user/loginUser"
			let data = `phone=${this.phone}&password=${this.password}`
			this.$http.post(url,data).then(res=>{
				Indicator.close();	//关闭loading
				if(!res.data.userPhone){	//登陆失败
					Toast({
						message: "用户名或密码错误",
						duration: 1000
					})
					return
				}
				//将登陆信息存到缓存
				let storage = window.localStorage
				storage.setItem("zyhtLoginInfo", JSON.stringify(res.data))
				//提示
				Toast({
					message: '登陆成功',
					duration: 1000
				})
				//跳转
				setTimeout(()=>{
					this.goBack()
				},1000)
			},err=>{
				Indicator.close();	//关闭loading
				console.log(err)
				Toast({
					message: '登陆失败',
					duration: 1000
				})
			})
		},
		toRegister() {
			this.$router.push('/register');
		},
		getYzm(){
			//验证
			if(this.phone.trim() == ""){
				alert('手机号码为必填项')
				return
			}
			let patrn = /^((?:13|15|18|14|17)\d{9}|0(?:10|2\d|[3-9]\d{2})[1-9]\d{6,7})$/
			if(!patrn.test(this.phone)){
				alert('手机号码格式错误')
				return
			}
			//请求验证码
			this.yzmBtnDis = true
			let url = this.baseUrl+"t_user/sendCode"
			let data = `phone=${this.phone}`
			this.$http.post(url,data).then(res=>{
				if(res.data.length==6){
					this.realYzm = res.data
					let num = 300
					var Timer = setInterval(()=>{
						num--
						this.yzmBtnTxt = num+"s后重新获取"
						num<=1 && (this.yzmBtnTxt = "获取验证码")
						num<=1 && (this.yzmBtnDis = false)
						num<=1 && clearInterval(Timer)
					},1000)
				}else{
					alert(res.data)
				}
			}).catch(err=>{
				alert('服务器请求失败')
			})
		},
		findPassBtn(){
			if(this.yzm.trim()!="" && this.yzm===this.realYzm){
				let url = this.baseUrl+"t_user/findPassword"
				let data = `phone=${this.phone}`
				this.$http.post(url,data).then(res=>{
					if(res.data.includes("用户")){
						alert(res.data)
					}else{
						alert("您的密码为："+res.data)
					}
				}).catch(err=>{
					alert('服务器请求失败')
				})
			}else{
				alert("验证码错误")
			}
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
		}
	}
};
</script>

<style lang="scss">
.login {
	padding: 40px 0;
	img {
		width: 100%;
	}
	.cont {
		padding: 20px 0.8rem;
	}
	.mint-field .mint-cell-title{
		width: 70px;
	}
	.pass .mint-cell-wrapper , .yzmInput .mint-cell-wrapper {
		border-bottom: 1px solid #d9d9d9;
	}
	.mint-cell-wrapper {
		padding: 0;
		border-left: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
	}
	.findPassForm{
		padding: 20px 15px;
		.getYzm{
			margin: 0 10px;
		}
	}
	.loginBtn , .findPassBtn{
		margin-top: 20px;
		width: 100%;
	}
	.otherLink {
		margin-top: 1.25rem;
		display: flex;
		justify-content: space-between;
		a {
			font-size: 0.9rem;
			color: orangered;
		}
	}
	.forgetPassPopup {
		width: 100%;
		height: 100%;
	}
	.mint-cell-text::after{
		content: "*";
		color: red;
	}
}
</style>
